<!--  -->
<template>
  <div>
    <div class="news">
      <div style="margin-bottom: 5px">
        <el-input
          placeholder="请输入用户名"
          style="width: 300px"
          v-model="searchText"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button style="margin-left: 5px" type="primary" @click="searchNew"
          >搜索
        </el-button>
        <el-button style="margin-left: 5px" type="success" @click="addNew"
          >写公告
        </el-button>
        <el-button style="margin-left: 5px" type="success" @click="getAll"
          >加载全部
        </el-button>
      </div>
      <el-table :data="news" border stripe height="600">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="addTime" label="发布时间"></el-table-column>
        <el-table-column label="操作1">
          <template slot-scope="scope">
            <el-button type="primary" @click="editNew(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="操作2">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="delNew(scope.$index, news, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="dialogPvVisible" title="写公告" :fullscreen="true">
        <el-form>
          <el-form-item>
            标题
            <el-input style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item>
            <vue-ueditor-wrap
              v-model="msg"
              style="width: 100%"
              :config="editorConfig"
            ></vue-ueditor-wrap>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogPvVisible = false"
            >Confirm</el-button
          >
        </span>
      </el-dialog>

      <el-pagination></el-pagination>
    </div>
  </div>
</template>

<script>
import { getAllNew, delNewById, searchNewByName } from "@/api/news";
import { Message } from "element-ui";
export default {
  name: "",
  props: [""],
  data() {
    return {
      news: null,
      searchText: "",
      curId: -1,
      dialogPvVisible: false,
      msg: "<h2>Hello World!</h2>",
      editorConfig: {
        // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
        UEDITOR_HOME_URL: "/UEditor/",
        // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: "//ueditor.szcloudplus.com/cos",
      },
    };
  },
  components: {},
  computed: {},
  created() {
    this.getAll();
  },
  beforeMount() {},
  mounted() {},
  methods: {
    getAll() {
      getAllNew().then((res) => {
        res.code === 20000
          ? (this.news = res.data)
          : Message.error("获取数据失败" + res.message);
      });
    },
    delNew(index, rows, row) {
      delNewById(row.id).then((res) => {
        if (res.code == 20000) {
          rows.splice(index, 1);
          Message.success("删除成功");
        } else {
          Message.error("删除失败" + res.message);
        }
      });
    },
    editNew(row) {
      this.curId = row.id;
      this.dialogPvVisible = true;
    },
    addNew() {
      this.curId = -2;
      this.dialogPvVisible = true;
    },
    searchNew() {
      this.searchText !== ""
        ? searchNewByName(this.searchText).then((res) => {
            res.code === 20000
              ? (this.news = res.data)
              : Message.error("加载数据出错" + res.message);
          })
        : Message.error("请输入内容");
    },
  },
  watch: {},
};
</script>

<style lang='css' scoped>
.news {
  margin: 15px;
}
</style>